<template>
  <div class="scene-container">
    <!-- 卡片网格 -->
    <div class="card-grid" v-if="!selectedCard">
      <div 
        v-for="scene in sceneList" 
        :key="scene.id"
        class="scene-card"
        :class="{ 
          'is-flipped': selectedNumber === scene.id,
          'is-completed': completedCards.includes(scene.id)
        }"
        @click="selectCard(scene.id)"
      >
        <div class="card-face card-front">
          <span class="card-number">{{ scene.id }}</span>
          <span v-if="completedCards.includes(scene.id)" class="completed-mark">已完成</span>
        </div>
        <div class="card-face card-back">
          <h3>场景 {{ scene.id }}</h3>
        </div>
      </div>
    </div>

    <!-- 选中的场景题详情 -->
    <div v-else class="scene-detail">
      <div class="scene-content">
        <h2>场景 {{ selectedNumber }}</h2>
        <div class="question">
          <h3>题目描述：</h3>
          <p>{{ currentScene.content }}</p>
        </div>
        
        <el-button 
          type="primary"
          @click="showAnalysis = !showAnalysis"
          class="analysis-btn"
        >
          {{ showAnalysis ? '隐藏分析' : '查看分析' }}
        </el-button>

        <div class="analysis" v-if="showAnalysis">
          <h3>得分点分析：</h3>
          <ol>
            <li v-for="(point, index) in currentScene.analysis" :key="index">
              {{ point }}
            </li>
          </ol>
        </div>

        <el-button @click="completeAndReturn" class="back-btn">完成并返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SceneQu",
  
  data() {
    return {
      selectedNumber: null,
      selectedCard: null,
      showAnalysis: false,
      completedCards: [],
      sceneList: [
        {
          id: 1,
          content: "辖区居民张三和李四为夫妻关系，丈夫张三多次家暴妻子李四，针对该情况，请结合有关法律法规和公安部《社区警务工作规范》要求，阐述社区民警应该做哪些工作？与法院以及工会、妇联等单位如何联动处置？",
          analysis: [
            "作为特定对象纳入管控。家庭暴力加害人属于特定对象范畴，应纳入省厅一体化系统进行管控。",
            "制作家暴告诫书。对家庭暴力情节较轻，依法不给予治安管理处罚并符合《湖南省家庭暴力告诫制度实施办法》第四条规定告诫情形的，应当由行为发生地公安派出所依法受理为行政案件，自受理家庭暴力报警之日起三日内作出告诫决定，制作《家庭暴力告诫书》并送达。",
            "定期查访。在送达告诫书后七日内，社区民警应当进行查访，监督其不再实施家庭暴力。首次查访未发现再次实施家庭暴力的，每三个月进行一次查访。连续三次未发现加害人再次实施家庭暴力的，不再查访。查访发现加害人再次实施家庭暴力的，依法追究法律责任。查访对象包括加害人、受害人，还可以视情查访共同居住人及其他知情人。",
            "人身安全保护令。当事人是无民事行为能力人、限制民事行为能力人，或者因受到强制、威吓等原因无法申请人身安全保护令的，公安机关可以代为申请。人民法院作出人身安全保护令后，公安机关应当采取措施协助执行。",
            "法治教育。社区民警可以根据查访情况，联合工会、共产主义青年团、妇女联合会、残疾人联合会、村（居）民委员会等有关组织工作人员，对加害人进行法治教育。"
          ]
        },
        {
          id: 2,
          content: "辖区居民张三和李四为夫妻关系，丈夫张三多次家暴妻子李四，针对该情况，请结合有关法律法规和公安部《社区警务工作规范》要求，阐述社区民警应该做哪些工作？与法院以及工会、妇联等单位如何联动处置？",
          analysis: [
            "作为特定对象纳入管控。家庭暴力加害人属于特定对象范畴，应纳入省厅一体化系统进行管控。",
            "制作家暴告诫书。对家庭暴力情节较轻，依法不给予治安管理处罚并符合《湖南省家庭暴力告诫制度实施办法》第四条规定告诫情形的，应当由行为发生地公安派出所依法受理为行政案件，自受理家庭暴力报警之日起三日内作出告诫决定，制作《家庭暴力告诫书》并送达。",
            "定期查访。在送达告诫书后七日内，社区民警应当进行查访，监督其不再实施家庭暴力。首次查访未发现再次实施家庭暴力的，每三个月进行一次查访。连续三次未发现加害人再次实施家庭暴力的，不再查访。查访发现加害人再次实施家庭暴力的，依法追究法律责任。查访对象包括加害人、受害人，还可以视情查访共同居住人及其他知情人。",
            "人身安全保护令。当事人是无民事行为能力人、限制民事行为能力人，或者因受到强制、威吓等原因无法申请人身安全保护令的，公安机关可以代为申请。人民法院作出人身安全保护令后，公安机关应当采取措施协助执行。",
            "法治教育。社区民警可以根据查访情况，联合工会、共产主义青年团、妇女联合会、残疾人联合会、村（居）民委员会等有关组织工作人员，对加害人进行法治教育。"
          ]
        },
        {
          id: 3,
          content: "辖区居民张三和李四为夫妻关系，丈夫张三多次家暴妻子李四，针对该情况，请结合有关法律法规和公安部《社区警务工作规范》要求，阐述社区民警应该做哪些工作？与法院以及工会、妇联等单位如何联动处置？",
          analysis: [
            "作为特定对象纳入管控。家庭暴力加害人属于特定对象范畴，应纳入省厅一体化系统进行管控。",
            "制作家暴告诫书。对家庭暴力情节较轻，依法不给予治安管理处罚并符合《湖南省家庭暴力告诫制度实施办法》第四条规定告诫情形的，应当由行为发生地公安派出所依法受理为行政案件，自受理家庭暴力报警之日起三日内作出告诫决定，制作《家庭暴力告诫书》并送达。",
            "定期查访。在送达告诫书后七日内，社区民警应当进行查访，监督其不再实施家庭暴力。首次查访未发现再次实施家庭暴力的，每三个月进行一次查访。连续三次未发现加害人再次实施家庭暴力的，不再查访。查访发现加害人再次实施家庭暴力的，依法追究法律责任。查访对象包括加害人、受害人，还可以视情查访共同居住人及其他知情人。",
            "人身安全保护令。当事人是无民事行为能力人、限制民事行为能力人，或者因受到强制、威吓等原因无法申请人身安全保护令的，公安机关可以代为申请。人民法院作出人身安全保护令后，公安机关应当采取措施协助执行。",
            "法治教育。社区民警可以根据查访情况，联合工会、共产主义青年团、妇女联合会、残疾人联合会、村（居）民委员会等有关组织工作人员，对加害人进行法治教育。"
          ]
        }
      ]
    }
  },

  computed: {
    currentScene() {
      return this.sceneList.find(scene => scene.id === this.selectedNumber) || {}
    }
  },

  methods: {
    selectCard(number) {
      if (this.completedCards.includes(number)) {
        return
      }
      this.selectedNumber = number
      setTimeout(() => {
        this.selectedCard = number
      }, 500)
    },

    completeAndReturn() {
      if (!this.completedCards.includes(this.selectedNumber)) {
        this.completedCards.push(this.selectedNumber)
      }
      this.selectedCard = null
      this.selectedNumber = null
      this.showAnalysis = false
    }
  }
}
</script>

<style lang="scss" scoped>
.scene-container {
  padding: 20px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  padding: 20px;
}

.scene-card {
  position: relative;
  height: 200px;
  perspective: 1000px;
  cursor: pointer;

  &.is-flipped .card-face {
    transform: rotateY(180deg);
  }

  &.is-completed {
    cursor: not-allowed;
    opacity: 0.7;

    .card-face {
      background: #f5f7fa;
    }

    .card-number {
      color: #909399;
    }
  }
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.6s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);

  &.card-back {
    transform: rotateY(180deg);
    background: #409EFF;
    color: white;
  }
}

.card-number {
  font-size: 36px;
  font-weight: bold;
  color: #409EFF;
}

.completed-mark {
  margin-top: 10px;
  font-size: 14px;
  color: #909399;
}

.scene-detail {
  max-width: 900px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);

  .question {
    margin-bottom: 20px;
    
    h3 {
      color: #303133;
      margin-bottom: 10px;
    }

    p {
      line-height: 1.8;
      color: #606266;
    }
  }

  .analysis {
    margin-top: 20px;
    padding: 20px;
    background: #f5f7fa;
    border-radius: 4px;

    h3 {
      color: #409EFF;
      margin-bottom: 15px;
    }

    ol {
      padding-left: 20px;
      
      li {
        margin-bottom: 10px;
        line-height: 1.6;
        color: #606266;
      }
    }
  }

  .analysis-btn {
    margin: 20px 0;
  }

  .back-btn {
    margin-top: 20px;
  }
}
</style>